<template>
  <el-col :span="4" :xs="24" class="el_white">
    <div class="head-container">
      <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
        style="margin-bottom: 20px" />
    </div>
    <div class="head-container">
      <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
        ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
    </div>
  </el-col>
</template>

<script>
  import { listZtree } from "@/api/dept";
  export default {
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    data() {
      return {
        deptName: "",
        deptId: "",
        // 部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },
      }
    },

    mounted() {
       this.getDeptTree();
    },

    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.deptId = data.id;
        this.handleQuery();
      },

      /** 查询部门下拉树结构 */
      getDeptTree() {
        listZtree().then(response => {
          this.deptOptions = response;
        });
      },

      handleQuery() {
         this.$emit("refresh", this.deptId);
      }
    }
  }
</script>

<style>
  .el_white{
    background-color: white;
    padding: 30px 0;
  }
</style>
